// 车辆信息
<template>

<c-form-block-container :title='"车辆信息"' >

    <div class="car-info-header" slot='header'>

        <!-- 操作按键 -->
        <div class="base-control-btns control-btns" v-if='!showDetailed'>
            <c-btn-icon class="btn" type='primary text' icon='icon-search-big-copy' @click='searchCarModel'></c-btn-icon>
        </div>
        
        <div class="detailed-control-btns control-btns" v-else>
            <c-btn-icon class="btn" type='danger text' icon='icon-close' @click='cancel'></c-btn-icon>
            <c-btn-icon class="btn" type='primary text' icon='icon-complete' @click='enter'></c-btn-icon>
            <c-btn-icon class="btn" type='primary text' icon='icon-refresh-big' @click='searchDangerPropbability'></c-btn-icon>
        </div>
       
    </div>
    
    <div class="car-info">  

        <!-- 加载提示 -->
        <c-loading v-if='loading'></c-loading>
        
        <!-- 基础及概要 -->
        <transition name='up-down'>
        <div class="base">
            <l-info-base :data='data'></l-info-base>
            <l-info-outline :data='carModels' @select="select"></l-info-outline>
            <l-info-tax class='tax' :data='data'></l-info-tax>
        </div>
        </transition>


        <!-- 详情 -->
        <transition name='up-down'>
        <div class="detailed" v-show='showDetailed'>
            <l-info-detailed  @dataForm='(fn) =>{ getDetailedForm = fn }' :data='currentDetailed'></l-info-detailed>
            <l-info-danger-propbability :auxiliaryData='carDangerAuxiliary' @dataForm='(fn) =>{ getDangerForm = fn }' :data='carDangerTableData'></l-info-danger-propbability>
        </div>
        </transition>
        
    </div>
</c-form-block-container>

</template>

<script lang='ts'>
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import {formatDate, deepCopy} from '@/utils/tools'
import loop from '@/utils/loop'
import toCharging from '@/components/ivew_conf/car_charging_reqFn'

const base  = () => import('./car_info_base/index.vue')
const detailed = () => import('./car_info_detailed/index.vue')
const dangerPropbabilityCmp = () => import('./danger_probability/index.vue')
const outline = () => import('./car_info_outline/index.vue')
const carTax = () => import('./car_tax/index.vue')



@Component({
    components: {
        'l-info-base': base,
        'l-info-detailed': detailed,
        'l-info-danger-propbability': dangerPropbabilityCmp,
        'l-info-outline': outline,
        'l-info-tax': carTax, 
    },
    
})
export default class carInfo extends Vue{
    name:string = 'car-info'
    
    @Prop()
    data:internalInf.carOrderAPI

    // 模块配置
    @Prop()
    carModels:carModel[]

    // 当前选中车型明细
    @Prop()
    currentDetailed

    // 出险率
    @Prop()
    carDangerTableData

    // 车船税,纯风险保费
    @Prop()
    carDangerAuxiliary:formInf.carDangerAuxiliary
    
    
    // 出险率组件内 表单数据获取方法
    getDangerForm

    // 车型明细组件内 表单数据获取方法
    getDetailedForm
    

    get showDetailed():boolean{
        return this.detailedStatus === 'open'
    }
    
    loading:boolean = false
    
    // 显示车型明细
    detailedStatus:string = 'close' 

    detailedSwitch(status?:string){
        let df = this.showDetailed ? 'close' : 'open';
        this.detailedStatus = status || df;
    }

    // 返回主界面
    cancel(){

        this.detailedSwitch('close')
    }

    // 保存信息修改
    enter(){
        let _vue = this;

        _vue.loading = true;

        // 更新出险率数据
        _vue.$store.commit('carFormStore/completionDangerData',  _vue.getDangerForm())

        // 更新当前选中项数据
        _vue.$store.commit('carFormStore/completionDetailed',  _vue.getDetailedForm())

        // 更新订单数据 (修改车型信息了， 需要同步)
        _vue.$store.commit('carFormStore/updateCurrentCarModel',  _vue.currentDetailed)
            
         // 最大加载时间
        setTimeout(() => {
            _vue.loading = false;
        }, 8000);
            
        // 保证计费查询在数据更新后 （先保存， 后计费）
        toCharging().then(success =>{
            if(success){
                _vue.detailedSwitch('close')
            }
            _vue.loading = false;
        })

       
        
    }

    // 查询车型
    searchCarModel (){
        let vue = this;
        this.loading = true
        
        this.$store.dispatch('request', {
            url: 'get/car_modules',
            data: {}
        }).then(success =>{
            vue.loading = false 
        })
        
    }

    // 选择车型
    select (currentRow){
        // 提交选中数据
        this.$store.commit('carFormStore/updateCurrentCarModel', deepCopy(currentRow))
        
        // 保证查询在数据更新之后
        this.searchDangerPropbability()

        // 显示车型明细
        this.detailedSwitch()
        
    }

    // 查询出险率
    searchDangerPropbability (){
        this.$store.dispatch('request', {
            url: 'get/danger_rate',
            data: {}
        })
    }

}

</script>

<style scoped lang='scss'>

.car-info-header{

    .control-btns{

        display: flex;
        justify-content: right;
        align-items: center;

        .btn+.btn{
            margin-left: _rem(10px);
        }
    }


}
.car-info{
    position: relative;
    height: 100%;
    min-height: _rem(540px);
    transform: all 3s;

    .detailed{
        @extend %position_center;
        height: 100%;
        background: $block_bg_color;
        z-index: 2;
    }
    
}
.tax{
    margin-top: _rem(20px);
}


</style>